<template>
  <!--单行文本-->
  <div class="input-text-box">
    <div class="input-text-title">
      <p v-text="title"></p>
    </div>
    <div class="input-text">
      <input type="text"
             :disabled="readOnly"
             :value="value"
             @input="inputChange"
             autocomplete="off"
             :placeholder="placeholder_def">
    </div>
  </div>
</template>

<script>
    export default {
        props:{
            value:{
                type: Object
            },
            title:{
                type: String,
                default: () => "单行文本"
            },
            placeholder:{
                type: String,
                default: () => null
            },
            readOnly:{
                type: Boolean,
                default: () => false
            },

        },
        data() {
            return {
                placeholder_def: this.placeholder == null? "请输入" + this.title : this.placeholder
            }
        },
        methods: {
            inputChange(e) {
                this.$emit("input", e.target.value);
            }
        }
    }
</script>

<style lang="scss" scoped>
  input, input:focus {
    background: none;
    outline: none;
    border: none;
  }
  .input-text-box {
    width: 100%;
    height: 30px;
    margin: 15px auto;
  }
  .input-text-title {
    cursor: default;
    float: left;
    width: 20%;
    height: 100%;
    line-height: 30px;
    /* font-size: 14px; */
    letter-spacing: 1.5px;
  }
  .input-text-title p {
    width: 100%;
    margin: 0 0;
    text-align: center;
    color: $fontColorLevel8;
  }
  .input-text {
    float: left;
    width: 70%;
  }
  .input-text input {
    cursor: default;
    border: 1px solid #2b313e;
    border-radius: 3px;
    width: 100%;
    height: 25px;
    padding-left: 8px;
    padding-right: 8px;
    /* font-size: 13px; */
    letter-spacing: 1.5px;
    color: $fontColorLevel8;
    transition: 0.3s;
  }
  .input-text input:focus {
    border: 1px solid #39404d;
  }
  .input-text input::placeholder {
    color: $fontColorLevel3;
    font-weight: lighter;
  }
</style>
